<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html> 
<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1" />
	<title>公告活动-活动管理</title>
	<c:import url="${appRoot}/public/head-tag.jsp"/>
	<style type="text/css">
		.textarea{
			width:100%;
			min-width:300px;
			min-height:150px;
			border:0;
		}
		.text-datetime{
			width:134px;
		}
		.xiuxiu-upload-container, div.xiuxiu-upload {
		    width: 310px;
			height: 130px;
		}
	</style>
</head>
<body>

    <c:import url="${appRoot}/public/header.jsp"/>
    
    <section class="container" id="app">
    
		<c:set var="sidebar" scope="request" value="content"/>
		<c:set var="navbar" scope="request" value="activity"/>
		<c:import url="${appRoot}/public/sidebar.jsp"/>
		
    	<div class="content">
    		<div class="content-top">
    			<h3 class="content-title">
    				<div class="bread">
    					<a href="/Manager/web/action/listPage">活动管理</a>
    					<span>&gt;</span>
    					<template v-if="isEdit">
        					<span v-text="appTitle+'活动编辑'"></span>
    					</template>
    					
    					<template v-else>
        					<a href="/Manager/web/action/guide">活动发布</a>
        					<span>&gt;</span>
        					<span v-text="appTitle"></span>
    					</template>
    				</div>
    			</h3>
    		</div>
    		<div class="content-main">
    			<div class="block block-main">
    				<div class="block-content" >

						<form action="{{submitAction}}" method="post" goback="/Manager/web/action/listPage">
							<div class="form-block">
								<div class="form-row">
									<span class="row-label">活动标题：</span>
									<div class="row-content">
										<input name="title" type="text" class="text"   ipattern="^.{2,40}$" iname="活动标题" v-model="form.title"/>
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">活动时间：</span>
									<div class="row-content">									 	
										<input type="text" name="sdate" lazy  v-model="form.applyStartTime | formatDate" class="text text-datetime" datepicker="datetime" iname="活动起始时间" itip="请选择活动起始时间" placeholder="活动起始时间" />
										<span>~</span>
										<input type="text" name="edate" lazy  v-model="form.applyEndTime | formatDate"  class="text text-datetime" datepicker="datetime" iname="活动结束时间" itip="请选择活动结束时间" placeholder="活动结束时间" />
									</div>
								</div>
								<div class="form-row">
									<span class="row-label">设置轮播：</span>
									<div class="row-content">
										<div class="row-value">
											<input type="checkbox" name="istop" id="category_2" value="1" v-model="form.loopStatus" :true-value="1"/>
											<label for="category_2">设置为轮播</label>
										</div>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">活动图片：</span>
									<div class="row-content">
										<div  xx-upload  class="xiuxiu-upload-container">
											<textarea type="config" style="display:none;">{{getImageConfig(form.thumb) | json}}</textarea>
										</div>
										<p class="value-note">图片规格：750x360</p>
									</div>
								</div>
								<div class="form-row">
									<span class="row-label">介绍：</span>
									<div class="row-content">
										<textarea name="intro"  rteditor class="textarea" iname="活动介绍"   v-model="form.intro"></textarea>
									</div>
								</div>
								
								<div class="form-row form-row-btn">
									<div class="row-content">
										<input type="hidden" name="type" v-model="pageType">
										<input type="hidden" name="appId" v-model="appId">
										<input type="hidden" v-if="isEdit" name="id" v-model="form.actionId">
										<button class="btn btn-default btn-large" v-text="form.actionId?'保存修改':'确认添加'"></button>
									</div>
								</div>
							</div>
						</form>
    				</div>
    			</div>

    		</div>
    	</div>
    </section>
   
   
   <script src="/pages/assets/js/require.all.js"></script>
   <script>
        requirejs([
            'vue',  
            'artDialog',  
            'artTemplate', 
            'moment', 
            
            'utils.search',
            'vender.modal',
            'vender.types', 
            
            'vender.xxupload', 
            'vender.rteditor', 
            'vender.datetimepicker', 
            'vender.actions', 
            
            'jquery.formcheck', 
            'jquery.ajaxsubmit'
        ],
        function(
            Vue, dialog, template, moment,
            
            Search, Modal, Field, 
            
            XXUpload, RichTextEditor, DateTimePicker, Action){
        	
        	var search = new Search().getParams();
        	
            var isEdit = !!search.id;
            
            Action.extend({
           		'form.detail' : '/Manager/web/action/detail?id={id}',
           		
           		'form.add' : '/Manager/web/action/addSave',
           		'form.update' : '/Manager/web/action/updateSave',
            })
            
            var PageType = Field.Plugins.ANNOUNCE;
            
   			var App={
   					
    			alert : function(){
    				return Modal.alert.apply(this, arguments)
    				//alert(arguments[0]);
    			},
    			
                getFormData :function(){
                    
                    var dtd = $.Deferred();
                    
                    var defaultData ={
                    	itemList:[]
                    }
                    
                    if(!isEdit){
                         return dtd.resolve(defaultData);
                    }
                    
                    var url = Action.get('form.detail', search);
                    $.getJSON(url, function(result){
                        var code = result.code;
                        if(code==200){
                            dtd.resolve(result.data)
                        }else{
                            var msg = result.msg || '数据获取失败！';
                            dtd.reject(msg)
                        }
                    })
                    .fail(function(e, type, msg){
                        dtd.reject(type + msg)
                    })
                    return dtd;
                },
    			
    			initForm:function(formData){
    				
    				new Vue({
    					el:'#app',
    					computed:{
    						'form':function(){
    							return this.getStore().form;
    						},
    						'isEdit':function(){
    							return isEdit;
    						},
    						'appTitle' : function(){
    						    return PageType.name
    						},
							'appId':function(){
								return search.appid;
							},
    						'submitAction' : function(){
    						    if(isEdit) return Action.get('form.update')
    						    return Action.get('form.add')
    						},
    						'pageType' : function(){
    						    return PageType
    						}
    					},
    					filters:{
    						formatDate :function(date, format){
    							if(!date) return 
    							format = format || 'YYYY-MM-DD HH:mm';
    							return moment(date).format(format)
    						}
    					},
    					methods:{
    						
    						getInitData :function(){
    							return {
    								store:{
    									form:formData,
    									PageType:PageType
    								}
    							}
    						},
    						
    						getStore :function(){
    							return this.store;
    						},
    						
    						getImageConfig:function(value){
    							return {
									name:'thumb',
									checker:{
										iname:'活动图片',
										itip:'请上传活动图片',
										iempty:'请上传活动图片'
									},
									value:value
								}
    						}
    					},
    					data:function(){
    						return this.getInitData()
    					}
    				})
    				
					$("form").ajaxSubmitify({
						beforeSubmit:function(){
							
							//检查图片是否已上传
							// TODO
						}
					})
    			},
    			
    			initAll : function(){
    			    
					XXUpload('[xx-upload]',{size:'750:360'});
					
                    DateTimePicker('[datepicker]');
                
                    RichTextEditor('[rteditor]');
                    
    			},
    			
    			init:function(){
    				var app = this;
    				
    				//$('body').loading(true)
	   				
    				this.getFormData()
    				.then(function(data){
    					app.initForm(data);
    					app.initAll();
    				})
    				.fail(function(msg){
    					app.alert(msg)
    				})
    				.always(function(){
		   				//$('body').loading(false)
    				})
    			}
    		}
            
    		App.init();
    	
        })
   </script>
    </body>
</html>